import { Alert, Tabs, TabItem } from '@aws-amplify/ui-react'; One of the goals of Amplify is to be a good citizen of the environment it exists in. As such Amplify works hard to not interfere with other tools that are being used. There are many CSS In JS libraries out there that give a number of benefits. Amplify does not use a CSS In JS library to implement its theming system but operates well with the major CSS In JS libraries out there. Below are a few of the libraries with descriptions of how they work with Amplify's theming system. If your CSS library depends on injecting style tags into the DOM, make sure they are being injected after Amplify UI's style tag. In other words, ensure the style tag for Amplify UI is listed above your custom styles in the `` tag. If Amplify UI's styles are injected after custom styles, then your custom styles may be unset. [Styled Components](https://github.com/styled-components/styled-components) allows you to create visual primitives with actual CSS code directly tied to components. ## Usage ```jsx import * as React from 'react'; import styled from 'styled-components'; import { View } from '@aws-amplify/ui-react'; const StyledView = styled(View)` background-color: black; font-size: 32px; `; //use it like any other amplify-ui component This is my Styled View ; ``` ## Interactions There are various ways to customize an Amplify component and Styled Components will interact with these customizations in the following ways: ### Amplify Styling Props These are styling props that can be used directly on an Amplify component which will affect a single style property. Examples of styling props are `color` or `fontWeight`. These Amplify styling props will take precedence over Styled Component styling. ```jsx import * as React from 'react'; import styled from 'styled-components'; import { View } from '@aws-amplify/ui-react'; const StyledView = styled(View)` color: blue; `; Using Styling props; ``` In the example above, the color of the view will be set to `red` because of the Amplify styling prop. ### Amplify variation props These props change the look and/or behavior of certain Amplify components. Examples include `size` and `variation`. ```jsx import * as React from 'react'; import styled from "styled-components"; import { Button } from '@aws-amplify/ui-react'; const StyledButton = styled(Button)` color: blue `; Primary Button ``` In the example above, the color of the button will be set to `blue`. Although the `primary` variation has a color value of white the Styled Components color value of blue will take precedence over the amplify-ui variation styling. ### Amplify Custom ClassNames These are custom classnames added onto Amplify components and can be used with CSS styling rules to modify the look of an Amplify component. ```jsx import * as React from 'react'; import styled from 'styled-components'; import { View } from '@aws-amplify/ui-react'; const styledView = styled(View)` color: blue; `; My Styled View; ``` ```CSS /* External Style Sheet */ .my-styled-view { color: red; } ``` In the example above, the color of the view will be `blue` because the styled component will take precedence over the classname CSS. ### CSS Root Variable Overrides Amplify theming provides many CSS variables to customize the look and feel of the entire application. These CSS variables can be used with the `:root` CSS psuedo-class to override all instances of component styling. ```jsx import * as React from 'react'; import styled from 'styled-components'; import { Button } from '@aws-amplify/ui-react'; const StyledButton = styled(Button)` color: blue; `; Button; ``` ```CSS /* External Style Sheet */ :root { --amplify-components-button-color: red; } ``` In the example above, the button color will be set to `blue` because the Styled Component will take precedence over the Amplify CSS variable. [JSS](https://github.com/cssinjs/jss/tree/master/packages/react-jss) is a library for generating Style Sheets with Javascript. ## Usage ```jsx import * as React from 'react'; import { createUseStyles } from 'react-jss'; import { View } from '@aws-amplify/ui-react'; const useStyles = createUseStyles({ styledText: { color: 'blue', }, }); const classes = useStyles(); //use the JSS create classes in the Amplify ui className This is my JSS Text ; ``` ## Interactions There are various ways to customize an Amplify component and JSS will interact with these customizations in the following ways: ### Amplify Styling Props These are styling props that can be used directly on an Amplify component which will affect a single style property. Examples of styling props are `color` or `fontWeight`. These Amplify styling props will take precedence over JSS styling. ```jsx import * as React from 'react'; import { createUseStyles } from 'react-jss'; import { View } from '@aws-amplify/ui-react'; const useStyles = createUseStyles({ styledText: { color: 'blue', }, }); const classes = useStyles(); This is my JSS Text ; ``` In the example above, the color of the view will be set to `red` because of the Amplify styling prop. ### Amplify variation props These props change the look and/or behavior of certain Amplify components. Examples include `size` and `variation`. ```jsx import * as React from 'react'; import { createUseStyles } from 'react-jss'; import { Button } from '@aws-amplify/ui-react'; const useStyles = createUseStyles({ styledButton: { color: 'blue', }, }); const classes = useStyles(); ; ``` In the example above, the color of the button will be set to `blue`. Although the `primary` variation has a color value of white the JSS color value of blue will take precedence over the amplify-ui variation styling. ### Amplify Custom ClassNames These are custom classnames added onto Amplify components and can be used with CSS styling rules to modify the look of an Amplify component. ```jsx import * as React from 'react'; import { createUseStyles } from 'react-jss'; import { View } from '@aws-amplify/ui-react'; const useStyles = createUseStyles({ styledText: { color: 'blue', }, }); const classes = useStyles(); const classNames = `${classes.styledText} my-styled-text`; This is my JSS Text ; ``` ```CSS /* External Style Sheet */ .my-styled-text { color: red; } ``` In the example above, the color of the text will be `blue` because the JSS styling will take precedence over the classname CSS. ### CSS Root Variable Overrides Amplify theming provides many CSS variables to customize the look and feel of the entire application. These CSS variables can be used at a root level to override all instances of component styling. ```jsx import * as React from 'react'; import { createUseStyles } from 'react-jss'; import { Button } from '@aws-amplify/ui-react'; const useStyles = createUseStyles({ styledButton: { color: 'blue', }, }); const classes = useStyles(); ; ``` ```CSS /* External Style Sheet */ :root { --amplify-components-button-color: red; } ``` In the example above, the button color will be set to `blue` because the JSS styling will take precedence over the Amplify CSS variable. [Emotion](https://github.com/emotion-js/emotion) is a library designed for writing css styles with JavaScript. ## Usage ```jsx /** @jsxImportSource @emotion/react */ import { jsx, css } from '@emotion/react'; import { Text } from '@aws-amplify/ui-react'; const styles = { color: 'blue', }; //use the Emotion css function and css prop This is my Emotion Text ; ``` ## Interactions There are various ways to customize an Amplify component and Emotion will interact with these customizations in the following ways: ### Amplify Styling Props These are styling props that can be used directly on an Amplify component which will affect a single style property. Examples of styling props are `color` or `fontWeight`. These Amplify styling props will take precedence over Emotion styling. ```jsx /** @jsxImportSource @emotion/react */ import { jsx, css } from '@emotion/react'; import { Text } from '@aws-amplify/ui-react'; const styles = { color: 'blue', }; This is my Emotion Text ; ``` In the example above, the color of the view will be set to `red` because of the Amplify styling prop. ### Amplify variation props These props change the look and/or behavior of certain Amplify components. Examples include `size` and `variation`. ```jsx /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; import { Button } from '@aws-amplify/ui-react'; const styles = { color: 'blue', }; ; ``` In the example above, the color of the button will be set to `blue`. Although the `primary` variation has a color value of white the Emotion color value of blue will take precedence over the amplify-ui variation styling. ### Amplify Custom ClassNames These are custom classnames added onto Amplify components and can be used with CSS styling rules to modify the look of an Amplify component. ```jsx /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; import { Text } from '@aws-amplify/ui-react'; const styles = { color: 'blue', }; This is my Emotion Text ; ``` ```CSS /* External Style Sheet */ .my-styled-text { color: red; } ``` In the example above, the color of the text will be `blue` because the Emotion styling will take precedence over the classname CSS. ### CSS Root Variable Overrides Amplify theming provides many CSS variables to customize the look and feel of the entire application. These CSS variables can be used at a root level to override all instances of component styling. ```jsx /** @jsxImportSource @emotion/react */ import { jsx, css } from '@emotion/react'; import { Button } from '@aws-amplify/ui-react'; const styles = { color: 'blue', }; ; ``` ```CSS /* External Style Sheet */ :root { --amplify-components-button-color: red; } ``` In the example above, the button color will be set to `blue` because the Emotion styling will take precedence over the Amplify CSS variable. [Aphrodite](https://github.com/Khan/aphrodite) is a Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. ## Usage ```jsx import { StyleSheet, css } from 'aphrodite'; import { Text } from '@aws-amplify/ui-react'; const styles = StyleSheet.create({ blue: { color: 'blue', }, }); //use the Aphrodite css function and the className prop This is an aphrodite Text component; ``` ## Interactions There are various ways to customize an Amplify component and Aphrodite will interact with these customizations in the following ways: ### Amplify Styling Props These are styling props that can be used directly on an Amplify component which will affect a single style property. Examples of styling props are `color` or `fontWeight`. Aphrodite will take precedence over these Amplify styling props. ```jsx import { StyleSheet, css } from 'aphrodite'; import { Text } from '@aws-amplify/ui-react'; const styles = StyleSheet.create({ blue: { color: 'blue', }, }); This is an aphrodite Text component ; ``` In the example above, the color of the view will be set to `blue` because of the Aphrodite styling will take precedence. ### Amplify variation props These props change the look and/or behavior of certain Amplify components. Examples include `size` and `variation`. ```jsx import { StyleSheet, css } from 'aphrodite'; import { Button } from '@aws-amplify/ui-react'; const styles = StyleSheet.create({ blue: { color: 'blue', }, }); ; ``` In the example above, the color of the button will be set to `blue`, because the Aphrodite styling will take precedence over the Amplify variation styling. ### Amplify Custom ClassNames These are custom classnames added onto Amplify components and can be used with CSS styling rules to modify the look of an Amplify component. ```jsx import { StyleSheet, css } from 'aphrodite'; import { Text } from '@aws-amplify/ui-react'; const styles = StyleSheet.create({ blue: { color: 'blue', }, }); const classNames = `${css(styles.blue)} my-styled-text`; This is an aphrodite Text component; ``` ```CSS /* External Style Sheet */ .my-styled-text { color: red; } ``` In the example above, the color of the text will be `blue` because the Aphrodite styling will take precedence over the classname CSS. ### CSS Root Variable Overrides Amplify theming provides many CSS variables to customize the look and feel of the entire application. These CSS variables can be used at a root level to override all instances of component styling. ```jsx /** @jsxImportSource @emotion/react */ import { StyleSheet, css } from 'aphrodite'; import { Button } from '@aws-amplify/ui-react'; const styles = StyleSheet.create({ blue: { color: 'blue', }, }); ; ``` ```CSS /* External Style Sheet */ :root { --amplify-components-button-color: red; } ``` In the example above, the button color will be set to `blue` because the Aphrodite styling will take precedence over the Amplify CSS variable.